<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <style>
        #outer{
            border: 1px solid black;
            width: 100%;
            height: 100%;
            background-image: url(img/7.jpg);
        }
        .nav{
            /* border: 1px solid black; */
            width: 100%;
            height: 30px;
        }
        .first{
              
            width: 100%;
            height: 500px;
        }
        .nav2{
           
            width: 70%;
            height: 30px;
            float: right;
        }
        .commen{
            /* border: 1px solid black; */
            width: 100%;
            height: 150px;
        }
         .title{
            /* border: 1px solid black; */
            width: 265px;
            height: 100%;
            float: left;
        }
        .mid{
            /* border: 1px solid black; */
            width: 60%;
            height: 85%;
            float: right;
            padding-top: 20px;
            /* text-align: center; */
        }
        #search{
            border: 2px solid #ff6534;
            width: 350px;
            height: 30px;
            text-indent: 22px;
        }

        #parent{
            /* position: relative; */
            padding-top:30px;
        }
        .b1{
            background-color: #ff6534;
            border: none;
            color: white;  
            font-size: 16px;  
            width: 90px;
            height: 36px;
            position: absolute;
            left: -4px;
            z-index: 2;
           }

           .m2{
               height: 240px;
               width: 240px;
               padding-left: 50px;
           }
       
    </style>
</head>
<body>
    <script src="plugins/layui/layui-v2.5.6/layui/layui.js"></script>
    <script>
      layui.use(['form', 'element'], function(){
 var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
 
 //监听导航点击
 element.on('nav(demo)', function(elem){
 //console.log(elem)
 layer.msg(elem.text());
 });
});
    </script>
  <div id="outer">
    <div class="nav">
        <div style="padding-left: 80px;">
        <i class="layui-icon layui-icon-home" style="font-size: 20px; color: gray;"></i> 
        店铺首页
        <i class="layui-icon layui-icon-location" style="font-size: 20px; color: gray;"></i>
        安徽
        <div class="nav2">
            <span class="layui-breadcrumb" lay-separator="|" style="padding-left: 90px;">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">个人中心</a>
                <a href="" style="padding-left:20px ;">我的订单</a>
                <a href=""style="padding-left:20px ;">我的生鲜</a>
                <a href=""style="padding-left:20px ;">驰星会员</a>
                <a href=""style="padding-left:20px ;">企业采购</a>
                <a href=""style="padding-left:20px ;">客户服务</a>
                <a href=""style="padding-left:20px ;">网站导航</a>
              </span>              
        </div>
        </div>
    </div>



    <div class="commen">
        <div class="title">
            <div class="title1" style="width: 100%; height: 80%;">
            <span id="fc1" style="color: red; font-size: 70px; font-family: '宋体' serif; text-align: center;">一号店</span>
            </div>
            <div class="title2" style="width: 100%; height: 20%; background-color: black;color: blanchedalmond; text-align: center;">
                生鲜商品分类
            </div>
         </div>

        <div class="mid">
            <span id="parent">
                <span class="c1"></span>
                <span>
                    <input type="text" id="search">
                </span>
                <span style="position: relative;">
                    
                    <button class="b1">搜索</button>
                </span> 
            </span> 


            <div class="last" style=" height: 100%; width: 400px; float: right;">
                 <a href="http://www.daidu.com" class="layui-btn layui-btn-primary">我的购物车</a>
                 <a href="http://www.daidu.com" class="layui-btn layui-btn-primary">扫码享优惠</a>

            </div>
            <div class="last" style=" height: 96px; width: 440px; ">
                <div class="last" style=" height: 50%; width: 440px; ">
                    <span class="layui-breadcrumb" lay-separator="|" >
                <a href="" style="padding-left:10px ;">芒果</a>
                <a href=""style="padding-left:10px ;">樱桃</a>
                <a href=""style="padding-left:10px ;">三文鱼</a>
                <a href=""style="padding-left:10px ;">鸡蛋</a>
                <a href=""style="padding-left:10px ;">牛排</a>
                <a href=""style="padding-left:10px ;">榴莲</a>
              </span>
                </div>
                <div class="last" style=" height: 50%; width: 440px; ">
                    <span class="layui-breadcrumb" lay-separator="|" >
                <a href=""style="padding-left:20px ;">生鲜首页</a>
                <a href=""style="padding-left:20px ;">东家菜</a>
                <a href=""style="padding-left:20px ;">优选100</a>
                <a href=""style="padding-left:20px ;">试吃</a>
                <a href=""style="padding-left:20px ;">企业购</a>
              </span>
                </div>
            </div>
            </div>
        </div>
    </div>
    <div class="choose" style="width: 1150px; height: 498px; border:solid black; float: right;">

        <div class="layui-carousel" id="test1" style="margin: auto; height: 498px; width: 100%;">
            <div carousel-item>
              <div><img src=""></div>
              <div><img src="img/4.jpg"></div>
              <div><img src="img/4.jpg"></div>
              <div><img src="img/4.jpg"></div>
              <div><img src="img/4.jpg"></div>
              <div><img src="img/4.jpg"></div>
            </div>
          </div>
          <!-- 条目中可以是任意内容，如：<img src=""> -->
           
          <script src="../layui/layui-v2.5.6/layui/layui.all.js"></script>
          <script>
          layui.use('carousel', function(){
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
              elem: '#test1'
              ,width: '100%'
              ,height:'100%' //设置容器宽度
              ,arrow: 'always' //始终显示箭头
              //,anim: 'updown' //切换动画方式
            });
          });
          </script>

    </div>


    <div class="first">
        <div class="choose" style="width: 260px; height: 498px; border:solid black; background-image: url(img/6.png);">
            
        </div>
    </div>
    <div class="product" style="width: 100%; height: 1500px; border: 1px solid black;">
        <div class="product" style="width: 100%; height: 2%; border: 1px solid black;">
            <span class="layui-breadcrumb" lay-separator="|" >
                <a href="" style="padding-left:10px ;">芒果</a>
                <a href=""style="padding-left:10px ;">樱桃</a>
                <a href=""style="padding-left:10px ;">三文鱼</a>
                <a href=""style="padding-left:10px ;">鸡蛋</a>
                <a href=""style="padding-left:10px ;">牛排</a>
                <a href=""style="padding-left:10px ;">榴莲</a>
              </span>
        </div>

        <div class="product" style="width: 100%; height: 20%; border: 1px solid black;">
            <div class="layui-container">
                <!-- 定义行 -->
                <div class="layui-row">
                    <!-- 定义列
                     md - 中屏 3代表的是元素所占的宽度
                    -->
                    <div class="layui-col-lg2 ">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-lg2 ">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-lg2 ">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-lg2 ">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <!-- <div class="layui-col-lg2 ">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-lg2 ">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div> -->
                   
        
        
                </div>
            </div>
        </div>

        <div class="product" style="width: 100%; height: 2%; border: 1px solid black;">
            <span class="layui-breadcrumb" lay-separator="|" >
                <a href="" style="padding-left:10px ;">芒果</a>
                <a href=""style="padding-left:10px ;">樱桃</a>
                <a href=""style="padding-left:10px ;">三文鱼</a>
                <a href=""style="padding-left:10px ;">鸡蛋</a>
                <a href=""style="padding-left:10px ;">牛排</a>
                <a href=""style="padding-left:10px ;">榴莲</a>
              </span>
        </div>
        <div class="product" style="width: 100%; height: 20%; border: 1px solid black;">
            <div class="layui-container">
                <!-- 定义行 -->
                <div class="layui-row">
                    <!-- 定义列
                     md - 中屏 3代表的是元素所占的宽度
                    -->
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <!-- <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div> -->
                   
        
        
                </div>
            </div>
        </div>
        <div class="product" style="width: 100%; height: 2%; border: 1px solid black;">
            <span class="layui-breadcrumb" lay-separator="|" >
                <a href="" style="padding-left:10px ;">芒果</a>
                <a href=""style="padding-left:10px ;">樱桃</a>
                <a href=""style="padding-left:10px ;">三文鱼</a>
                <a href=""style="padding-left:10px ;">鸡蛋</a>
                <a href=""style="padding-left:10px ;">牛排</a>
                <a href=""style="padding-left:10px ;">榴莲</a>
              </span>
        </div>
        <div class="product" style="width: 100%; height: 20%; border: 1px solid black;">
            <div class="layui-container">
                <!-- 定义行 -->
                <div class="layui-row">
                    <!-- 定义列
                     md - 中屏 3代表的是元素所占的宽度
                    -->
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <!-- <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    -->
        
        
                </div>
            </div>
        </div>
        <div class="product" style="width: 100%; height: 2%; border: 1px solid black;">
            <span class="layui-breadcrumb" lay-separator="|" >
                <a href="" style="padding-left:10px ;">芒果</a>
                <a href=""style="padding-left:10px ;">樱桃</a>
                <a href=""style="padding-left:10px ;">三文鱼</a>
                <a href=""style="padding-left:10px ;">鸡蛋</a>
                <a href=""style="padding-left:10px ;">牛排</a>
                <a href=""style="padding-left:10px ;">榴莲</a>
              </span>
        </div>
        <div class="product" style="width: 100%; height: 20%; border: 1px solid black;">
            <div class="layui-container">
                <!-- 定义行 -->
                <div class="layui-row">
                    <!-- 定义列
                     md - 中屏 3代表的是元素所占的宽度
                    -->
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <!-- <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div>
                    <div class="layui-col-md2 layui-col-xs2">
                        <img src="img/8.jpg" class="m2" alt="">
                    </div> -->
                </div>
            </div>
        </div>

    <div class="product" style="width: 100%; height: 12%; border: 1px solid black; background-image: url(img/9.png);"></div>
    </div>
</div>
</body>
</html>